<template>
  <div class="app-container">
    <el-row :gutter="20" class="video-monitor-container">
      <splitpanes
        :horizontal="this.$store.getters.device === 'mobile'"
        class="default-theme"
      >
        <!--摄像机树数据-->
        <pane size="16">
          <el-col>
            <div class="head-container">
              <el-input
                v-model="cameraName"
                placeholder="请输入摄像机名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
                style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                :data="treeOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                node-key="id"
                default-expand-all
                highlight-current
                @node-click="handleNodeClick"
              />
            </div>
          </el-col>
        </pane>
        <!--用户数据-->
        <pane size="84">
          <el-col class="video-monitor-box" :span="20" :xs="24">
            <div class="head">
              <h6 class="title">视频监控</h6>
              <div class="operate-box">
                <button
                  class="btn-operate"
                  @click.stop="showOperateList = !showOperateList"
                ></button>
                <ul class="operate-list" v-show="showOperateList">
                  <li
                    class="list-item"
                    :class="{ on: currentScreen === 1 }"
                    @click="showVideoBox(1)"
                  >
                    单屏显示
                  </li>
                  <li
                    class="list-item"
                    :class="{ on: currentScreen === 4 }"
                    @click="showVideoBox(4)"
                  >
                    四屏显示
                  </li>
                  <!-- <li class="list-item" :class="{ on: currentScreen === maxScreen }" @click="showVideoBox(maxScreen)">六屏显示</li> -->
                </ul>
              </div>
            </div>
            <div class="video-wrap" :class="'screen' + currentScreen">
              <easy-player
                :id="'player' + (index + 1)"
                v-for="(item, index) in videoList"
                :index="index"
                :showHead="true"
                :videoTitle="item.name"
                :videoUrl="item.videoUrl"
                :key="index"
                @closeVideo="closeVideo"
              />
            </div>
            <!--云台控制 <div class="camera-control">
            <div class="direction">
            <div v-for="(item, index) in directionOptions" class="direction-item" :key="index">
                <el-icon>
                <component :is="item.icon"></component>
                </el-icon>
            </div>
            </div>
            <div class="scale">
            <span>变倍</span>
            <span class="scale-icon">
                <el-icon><Minus /></el-icon>
            </span>
            <span class="scale-icon">
                <el-icon><Plus /></el-icon>
            </span>
            </div>
            <div class="step">
            <span>步长</span>
            <el-slider v-model="holderStep" class="slider" :max="8" :min="1" show-stops tooltip-class="my-video-tooltip"></el-slider>
            </div>
        </div> -->
          </el-col>
        </pane>
      </splitpanes>
    </el-row>
  </div>
</template>

<script>
import { listTree, playStream } from "@/api/video/camera";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import EasyPlayer from "@/components/VideoPlayer/EasyPlayer";

export default {
  name: "CameraTree",
  components: { EasyPlayer, Splitpanes, Pane },
  data() {
    return {
      // 遮罩层
      loading: true,
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 树选项
      treeOptions: [],
      // 是否显示弹出层
      open: false,
      // 过滤名称
      cameraName: undefined,
      maxScreen: 4,
      currentScreen: 1,
      currentIndex: 0,
      showOperateList: false,
      videoList: [{}],
      clickCameraList: [],
    };
  },
  watch: {
    // 根据名称筛选树
    cameraName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listTree({}).then((response) => {
        this.treeOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (data.type == "camera") {
        //this.handlePlay(data.id);
        
        const isExit = this.clickCameraList.some((v) => v.id === data.id)
        if (isExit) {
            return true;
        }

        playStream(data.id).then((response) => {
          this.handlePlay({...response.data, videoUrl:response.data.mainStream});
        });
      }
      return true;
    },
    /** 播放操作 */
    handlePlay(res) {
        this.currentIndex = this.getCurrentEmptyIndex();
        this.clickCameraList[this.currentIndex] = res;
        this.setVideo();
    },
    closeVideo(index) {
      this.clickCameraList[index] = {};
      this.videoList[index] = {};
    },
    async setVideo() {
        let videoArr = [];
        for (let i = 0; i < this.currentScreen; i++) {
            let item = this.clickCameraList[i] || {};
            videoArr[i] = item;
        }
        this.videoList = videoArr;
    },
    showVideoBox(num) {
      this.showOperateList = false;
      if (this.currentScreen == num) {
        return;
      }
      this.currentScreen = num;
      this.lockScreen = num;
      this.clickCameraList = [];
      this.currentIndex = 0;
      this.videoList.forEach((v) => {
        v.videoUrl = "";
      });
      this.setVideo();
    },
    getCurrentEmptyIndex() {
      for (let i = 0; i < this.clickCameraList.length; i++) {
        if (!this.clickCameraList[i] || !this.clickCameraList[i].id) {
          return i;
        }
      }
      return 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 84px);
  .video-monitor-container {
    height: 100%;
  }
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
  .title {
    font-size: 18px;
    color: #6e7074;
  }
  .operate-box {
    position: relative;
    z-index: 10;
    .btn-video {
      display: inline-block;
      color: #409eff;
      font-size: 14px;
      vertical-align: middle;
      margin-right: 20px;
      margin-top: -20px;
    }
    .btn-operate {
      width: 30px;
      height: 30px;
      border: none;
      cursor: pointer;
      background: url(./icons/icon-screen.png) no-repeat center/cover;
    }
    .operate-list {
      position: absolute;
      right: -15px;
      top: 15px;
      width: 95px;
      // height: 112px;
      padding: 12px 10px;
      border-radius: 5px;
      box-shadow: rgba(0, 0, 0, 0.5) 2px 6px 12px;
      background: #fff;
      z-index: 5;
      &::before {
        content: "";
        position: absolute;
        right: 25px;
        top: -10px;
        border: 5px solid transparent;
        border-bottom-color: #fff;
      }
      // background: url(@/assets/images/home/bg-operate-list.png) no-repeat top/100% auto;
      .list-item {
        text-align: center;
        font-size: 14px;
        color: #6e7074;
        margin-top: 8px;
        cursor: pointer;
        &:first-of-type {
          margin-top: 0;
        }
        &.on {
          color: #409eff;
        }
      }
    }
  }
}
.video-monitor-box {
  position: relative;
  width: 100%;
  height: 100%;
  .video-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 15px;
    width: 100%;
    height: calc(100% - 32px);
    z-index: 2;
    &.screen4 {
      margin-top: -5px;
      .video-box {
        width: 49.3% !important;
        height: calc(50% - 15px);
        margin-top: 15px;
      }
    }
    &.screen6 {
      margin-top: -10px;
      .video-box {
        width: 32.4%;
        height: 340px;
        margin-top: 15px;
      }
    }
    .video-box {
      width: 100%;
      height: calc(100% - 15px);
      border-radius: 10px;
    }
  }

  .camera-control {
    position: absolute;
    width: 150px;
    right: 10px;
    bottom: 50px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999;
    .direction {
      height: 150px;
      width: 150px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      .direction-item {
        width: calc((100% - 20px) / 3);
        display: flex;
        justify-content: center;
        cursor: pointer;
        align-items: center;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .scale {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 10px;
      padding: 0 10px;
      color: #fff;
      .scale-icon {
        cursor: pointer;
      }
    }
    .step {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 10px;
      padding: 0 10px;
      padding-bottom: 10px;
      color: #fff;
      .slider {
        width: calc(100% - 42px);
      }
    }
  }
}
</style>
